<template>
	<view class="school_content">


		<view class="uni-list">
			<view class="uni-list-cell">
				<view class="uni-list-cell-left">
					实验室：
				</view>
				<view class="uni-list-cell-db">
					<picker @change="bindEquipementChange" :value="equipeIndex" :range="equipelist">
						<view class="uni-input">{{equipelist[equipeIndex]}}</view>
					</picker>
				</view>
				<view class="uni-list-cell-left">
					>
				</view>
			</view>
		</view>

		<view class="container">
			<view class="title">
				<view class="left" @click="jumptopreweek"> {{jdot}} </view>
				<view class="date">{{weekCN}} {{startdate}}~{{enddate}}</view>
				<view class="right" @click="jumptonextweek">>></view>
			</view>
			<view class="title1">
				<view class="gzdata"><text decode="true" space="true"> &nbsp;</text></view>
				<view class="gzdata" v-for="(item,index) in week_dateArr" :key="item">
					<view style="height:30px;line-height:30px;">{{item.week_w}}</view>
					<view style="height:30px;line-height:30px;font-size:12px;">{{item.week_date2}}</view>
				</view>

			</view>
			<view class="status" v-for="(itemx,idx) in datetoequipArrss" :key="itemx">

				<template v-for="(itemx2,idx2) in itemx">
					<view v-if="idx2==0" class="gzdata">
						<view style="height:60rpx;line-height:60rpx;">{{itemx2.cname0}}</view>
						<view style="height:60rpx;line-height:60rpx;">{{itemx2.cname1}}</view>
					</view>
					<template v-else>
						<view class="gzdata" v-if="itemx2.week_status=='green'" :data-i="idx" :data-k="idx2"
							:data-time="itemx[0].cname" :data-date="itemx2.week_date" :data-no="itemx[0]['no']"
							@click="jumptobooking(itemx2,itemx[0].cname)">
							<text decode="true" space="true" :class="itemx2.week_status"> &nbsp;</text>
						</view>
						<view class="gzdata" v-else>
							<text decode="true" space="true" :class="itemx2.week_status">&nbsp;</text>
						</view>
					</template>
				</template>

			</view>
			<view class="desc">
				<view><text decode="true" space="true" class="green"> &nbsp;</text>绿：可预约</view>
				<view><text decode="true" space="true" class="gray"> &nbsp;</text>灰：不可预约</view>
				<view class="right"><text decode="true" space="true" class="red"> &nbsp;</text>红：实验室维护</view>

			</view>

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				jdot: '<<',
				curindex: 0,
				curname: "",
				curid: 0,
				list: [],

				weekCN: "",
				weekCN1: "",
				weekCN2: "",

				week: 1,
				weekCN: "",
				datetoweeks: [],
				datetoequipArrss: [],
				week_dateArr: [],
				enddate: "",
				startdate: "",
				equipelist: [],
				equipeobjlist: [],

				equipeIndex: -1,
				task_week_count: 0,
				flag: "",
			}
		},
		onLoad(options) {
			if (options.flag) {

				this.flag = options.flag

			}

			this.getEquipeListall();

		},
		methods: {

			getEquipeListall: function() {

				const that = this;

				const url = 'api/classroom/listall?token=' + uni.getStorageSync('token');

				this.$request.request(url, '', 0, 'get', false).then(res => {

					let res2w = res.data;
					if (typeof res2w == 'string') {
						let str22 = res2w.replace(/\ufeff/g, ""); //去除反斜杠
						res2w = JSON.parse(str22); //string转object
					}
					if (res2w.status == 1) {
						const res2_data_data = res2w.data;
						let list = res2w.data.list;
						if (!list) list = [];
						let equipelist = [];
						list.forEach(item => {
							equipelist.push(item.name);
						});

						let curequipeIndex = 0;
						let curequipeid = 0;
						let curweek = 1;

						console.log("that.flag=" + that.flag)
						if (that.flag != "new" && uni.getStorageSync("curequipeid")) {
							curequipeid = uni.getStorageSync("curequipeid");
							curweek = uni.getStorageSync("curweek");
							curequipeIndex = uni.getStorageSync("curequipeIndex");
						} else {
							curequipeid = list.length > 0 ? list[0].id : 0;
							equipelist.forEach((item, index) => {
								if (item.id == curequipeid) {
									curequipeIndex = index;
								}
							});

							uni.setStorageSync("curequipeid", curequipeid);
							uni.setStorageSync("curweek", curweek)
							uni.setStorageSync("curequipeIndex", curequipeIndex)
						}

						that.equipeobjlist = list
						that.equipelist = equipelist
						that.week = curweek
						that.curid = curequipeid
						that.equipeIndex = curequipeIndex

						if (list.length > 0) {
							that.getequipmentinfo(curequipeid, curweek);
						}
					} else if (res2w.status == -2) {

						uni.showToast({
							title: "" + res2w.msg,
							icon: 'none',
							duration: 3000,
							success: function() {

							}
						});
						uni.removeStorageSync('token');
						uni.removeStorageSync('isuser');

						setTimeout(() => {
							uni.redirectTo({
								url: '../login/login?redirect_page=preclass',
							})
						}, 3000);

					} else {
						uni.showToast({
							title: "" + res2w.msg,
							icon: 'none',
							duration: 3000
						});
					}

				})

			},

			bindEquipementChange: function(e) {
				const equipeobjlist = this.equipeobjlist;
				const equipeIndex = e.detail.value;
				const id = equipeobjlist[equipeIndex].id;

				uni.setStorageSync('curequipeIndex', equipeIndex);
				uni.setStorageSync('curweek', 1);
				uni.setStorageSync('curequipeid', id);

				this.equipeIndex = equipeIndex
				this.curid = id
				this.week = 1
				this.flag = "new"


				this.getequipmentinfo(id, 1);
			},
			jumptopreweek: function(e) {
				let week = this.week;
				if (week > 1) {
					week = week - 1;

					uni.setStorageSync('curweek', week);

					this.week = week
					this.flag = "new"

					this.getequipmentinfo(this.curid, week);
				}
			},
			jumptonextweek: function(e) {
				let week = this.week;
				const task_week_count = this.task_week_count;
				if (task_week_count > 0 && week >= this.task_week_count) return;
				week = week + 1;

				uni.setStorageSync('curweek', week);

				this.week = week
				this.flag = "new"

				this.getequipmentinfo(this.curid, week);

			},
			jumptobooking: function(item, week_time) {
				console.log('item', item)

				const id = this.curid;

				const week_date = item.week_date;
				const week_no = item.no;

				const mode = 2;

				this.flag = ""
				uni.navigateTo({
					url: '/pages/school/toclassbooking/index?id=' + id + '&mode=' + mode + '&wdate=' +
						week_date + '&wtime=' + week_time + '&wtno=' + week_no,
				})
			},

			getequipmentinfo: function(id, week) {
				uni.showLoading({
					title: '加载中...',
				})
				const that = this;
				const url = 'api/classroom/datetimestatus?id=' + id + '&week=' + week + '&token=' + uni
					.getStorageSync('token');

				this.$request.request(url, '', 0, 'get', false).then(res => {

					let res2w = res.data;
					if (typeof res2w == 'string') {
						let str22 = res2w.replace(/\ufeff/g, ""); //去除反斜杠
						res2w = JSON.parse(str22); //string转object
					}

					if (res2w.status == 1) {
						const res2_data_data = res2w.data;
						const datetoweeks = res2_data_data.datetoweeks;
						const datetoequipArrss = res2_data_data.datetoequipArrss;
						const week_dateArr = res2_data_data.week_dateArr;
						const startdate = res2_data_data.startdate;
						const enddate = res2_data_data.enddate;
						const task_week_count = res2_data_data.task_week_count;
						const weekCN = res2_data_data.weekCN;

						that.weekCN = weekCN
						that.datetoweeks = datetoweeks
						that.datetoequipArrss = datetoequipArrss
						that.week_dateArr = week_dateArr
						that.enddate = enddate
						that.startdate = startdate
						that.task_week_count = task_week_count

					} else if (res2w.status == -2) {

						uni.showToast({
							title: "" + res2w.msg,
							icon: 'none',
							duration: 3000,
							success: function() {

							}
						});
						uni.removeStorageSync('token');
						uni.removeStorageSync('isuser');

						setTimeout(() => {
							uni.redirectTo({
								url: '../login/login?redirect_page=preclass&id=' + that.id +
									'&week=' + that.week,
							})
						}, 3000);

					} else {

						uni.showToast({
							title: "" + res2w.msg,
							icon: 'none',
							duration: 3000
						});

						setTimeout(() => {
							uni.navigateBack({
								fail: function() {
									uni.redirectTo({
										url: '../index/index',
									})
								}
							})
						}, 3000);
					}
					uni.hideLoading();
				})

			},




			toform() {
				console.log('toform')

			}
		}
	}
</script>

<style>
	page {}

	.school_content {
		display: flex;
		flex-direction: column;

		font-size: 16px;
	}

	.title {
		display: flex;
		flex-direction: row;
		font-size: 16px;
		justify-content: space-between;
		padding: 10px 10px;
		background-color: #f9f9f9;
		font-weight: bold;
	}


	.container {
		display: flex;
		flex-direction: column;

		background-color: white;
	}

	.container .title {
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: space-evenly;
		padding: 10px 0px;

	}

	.container .title1 {
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: space-between;
		flex: 6;

	}

	.container .title1 .gzdata {
		border: 1px solid #cccccc;
		justify-content: space-between;
		flex: 1;
	}


	.container .status {
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: space-between;
		flex: 6;
	}

	.container .status .gzdata {
		border: 1px solid #cccccc;
		justify-content: space-between;
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.container .status .gzdata .green {
		color: #16A085;
		width: 100%;
		background-color: #16A085;
		flex: 1;
	}

	.container .status .red {
		color: #E74C3C;
		flex: 1;
		background-color: #E74C3C;
	}

	.container .status .yellow {
		color: #F1C40F;
		flex: 1;
		background-color: #F1C40F;
	}

	.container .status .gray {
		color: #BDC3C7;
		flex: 1;
		background-color: #BDC3C7;
	}

	.container .status .blue {
		color: #4b7bec;
		flex: 1;
		background-color: #4b7bec;
	}

	.container .status .purple {
		color: #e84393;
		flex: 1;
		background-color: #e84393;
	}


	.container .desc {
		margin-top: 10px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		text-align: center;
		justify-content: space-evenly;
	}

	.container .desc .green {
		flex: 1;
		color: #16A085;
		padding: 0rpx 20rpx;
		background-color: #16A085;

	}

	.container .desc .red {
		flex: 1;
		color: #E74C3C;
		padding: 0rpx 20rpx;
		background-color: #E74C3C;
	}

	.container .desc .yellow {
		flex: 1;
		color: #F1C40F;
		padding: 0rpx 20rpx;
		background-color: #F1C40F;
	}

	.container .desc .gray {
		flex: 1;
		color: #BDC3C7;
		padding: 0rpx 20rpx;
		background-color: #BDC3C7;
	}

	.container .desc .blue {
		flex: 1;
		color: #4b7bec;
		padding: 0rpx 14rpx;
		background-color: #4b7bec;
	}

	.container .desc .purple {
		flex: 1;
		color: #e84393;
		padding: 0rpx 20rpx;
		background-color: #e84393;
	}
</style>